<template>
	<!-- 防伪溯源 -->
	<view class="main" v-show="isShowPage">
		<!-- #ifdef H5 -->
		<view style="text-align: center;padding-top: 44rpx;" @click="toAsy">
			<image src="https://app.asy315.vip/s/m/images/source_img.png" mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view style="text-align: center;padding-top: 44rpx;">
			<image src="https://app.asy315.vip/s/m/images/source_img.png" mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<view class="tabs">
			<u-grid :col="4" :border="false" @click="gridClick">
				<u-grid-item :index="index" v-for="(item,index) in source" :key="index" v-show="item.checked">
					<image :src="item.icon" mode="widthFix" class="tabs-icon"></image>
					<view :class="isActive==index?'grid-text':''">{{item.moduleName}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="content">
			<swiper class="swiper" :current='isActive' :indicator-dots="false" :autoplay="false" @change="swiperChange">
				<swiper-item v-if="source.length>0">
					<scroll-view class="swiper-one-list" scroll-y="true">
						<view class="swiper-item uni-bg-red">
							<view class="gap">以下信息由企业提供</view>
							<view class="info-title">
								<image src="https://app.asy315.vip/s/m/images/fw.png" mode="widthFix" class="info-title-icon"></image>
								<view class="info-title-text">防伪校验</view>
							</view>
							<view class="imgView padView">
								<image :src="imgSrc" style="margin-top: 20rpx;" mode="widthFix"
									:style="{'width': (imgWidth ? '100%':'26%')}" @click="preview"></image>
							</view>
							<view class="content-info">
								<view class="info-line">
									<view class="info-line-left">
										公司名称：
									</view>
									<view class="info-line-right">
										{{info.customer.nameCn}}
									</view>
								</view>
								<view class="info-line">
									<view class="info-line-left">
										防伪码：
									</view>
									<view class="info-line-right" v-if="info.code.length>0">
										<text v-for="(item,index) in info.code" :key="index"
											:class="item.class">{{item.value}}</text>
									</view>
								</view>
								<view class="info-line">
									<view class="info-line-left">
										防伪提示：
									</view>
									<view class="info-line-right">
										该防伪码已被查询
										<text style="color: #1e9fff;margin: 0 10rpx;">{{info.label.queryTimes}}</text>
										次。首次查询时间: <text
											style="color: #1e9fff;margin: 0 10rpx;">{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}。</text>
										<text v-if="info.label.queryTimes>1">请注意，此防伪码已被多次查询, 谨防假冒!</text>
										更多防伪知识请下载<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun</u-link>APP
									</view>
								</view>
								<view class="info-line">
									<view class="info-line-left">
										防伪校验：
									</view>
									<view class="info-line-right">
										{{info.checkCode}}
									</view>
								</view>
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							<view v-for="(item,index) in source[0].attr" :key="index">
								<view class="info-title">
									<image src="https://app.asy315.vip/s/m/images/ycl_icon.png" mode="widthFix" class="info-title-icon"></image>
									<view class="info-title-text">{{item.title}}</view>
								</view>
								<view class="content-info">
									<view class="info-line" v-if="subItem.attrName||subItem.attrValue"
										v-for="(subItem,subIndex) in item.subAttr" :key="subIndex">
										<view class="info-line-left">
											{{subItem.attrName}}：
										</view>
										<view class="info-line-right">
											{{subItem.attrValue}}
										</view>
									</view>
								</view>
								<view v-if="item.imageType">
									<u-swiper :list="item.images" height="650" border-radius="0"></u-swiper>
								</view>
								<view class="imgView padView" v-else>
									<image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" :src="imgItem"
										mode="widthFix" style="width: 100%;"></image>
								</view>
								<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							</view>
							<view class="info-title">
								<image src="https://app.asy315.vip/s/m/images/product1.png" mode="widthFix" class="info-title-icon"></image>
								<view class="info-title-text">产品详情</view>
							</view>
							<view class="padView">
								<image v-for="(item,index) in productImg" :key="index" :src="item" mode="widthFix"
									class="product_img">
								</image>
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							<view class="fifth">
								<view class="title">
									<view class="left">关于我们</view>
									<view class="right">
										<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
									</view>
								</view>
								<view class="infoView">
									<view class="qr">
										<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;"></image>
									</view>
									<view class="info">
										<view class="item">
											<view class="left left1">公众号</view>
											<view class="right">ASY艾斯芸防伪</view>
										</view>
										<view class="item">
											<view class="left">联系方式</view>
											<view class="right">+8615989366075</view>
										</view>
										<view class="item">
											<view class="left">公司邮箱</view>
											<view class="right">asy315@asy315.com</view>
										</view>
										<view class="item">
											<view class="left">公司地址</view>
											<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
										</view>
									</view>
								</view>
							</view>
							<view class="footer">
								ICP备案编号：粤ICP备18119196号-1
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item v-if="source.length>1">
					<scroll-view class="swiper-one-list" scroll-y="true">
						<view class="swiper-item uni-bg-green">
							<view class="gap">以下信息由企业提供</view>
							<view class="info-title">
								<image src="https://app.asy315.vip/s/m/images/ycl_icon.png" mode="widthFix" class="info-title-icon"></image>
								<view class="info-title-text">企业信息</view>
							</view>
							<view class="content-info">
								<view class="info-line" v-for="(item,i) in company" :key="i">
									<view class="info-line-left">
										{{item.left_text}}：
									</view>
									<view class="info-line-right">
										{{item.right_text}}
									</view>
								</view>
							</view>
							<view v-if="info.customer.id == 992" style="text-align: center;margin-bottom: 26rpx;">
								<image src="https://app.asy315.vip/s/m/images/syQRcode.jpg" mode="widthFix" style="width: 300rpx;"></image>
								<view>微信公众号</view>
							</view>
							<view class="map">
								<!-- #ifdef H5 -->
								<baidu-map class="bm-view" :dragging="false" :center="center"
									:zoom="15">
									<bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
									</bm-marker>
									<bm-info-window :position="center" :show="true" :height="0" :width="0">
										<p v-text="company[0].right_text"></p>
									</bm-info-window>
								</baidu-map>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<map style="width: 100%; height: 100%;" :latitude="center.lat" :longitude="center.lng"
									:markers="covers"></map>
								<!-- #endif -->
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							<view v-for="(item,index) in source[1].attr" :key="index">
								<view class="info-title">
									<image src="https://app.asy315.vip/s/m/images/ycl_icon.png" mode="widthFix" class="info-title-icon"></image>
									<view class="info-title-text">{{item.title}}</view>
								</view>
								<view class="content-info">
									<view class="info-line" v-if="subItem.attrName||subItem.attrValue"
										v-for="(subItem,subIndex) in item.subAttr" :key="subIndex">
										<view class="info-line-left" v-if="subItem.attrName">
											{{subItem.attrName}}：
										</view>
										<view class="info-line-right" v-if="subItem.attrValue">
											{{subItem.attrValue}}
										</view>
									</view>
								</view>
								<view v-if="item.imageType">
									<u-swiper :list="item.images" height="650" border-radius="0"></u-swiper>
								</view>
								<view class="imgView padView" v-else>
									<image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" :src="imgItem"
										mode="widthFix" style="width: 100%;"></image>
								</view>
								<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							<view class="fifth">
								<view class="title">
									<view class="left">关于我们</view>
									<view class="right">
										<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
									</view>
								</view>
								<view class="infoView">
									<view class="qr">
										<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;"></image>
									</view>
									<view class="info">
										<view class="item">
											<view class="left left1">公众号</view>
											<view class="right">ASY艾斯芸防伪</view>
										</view>
										<view class="item">
											<view class="left">联系方式</view>
											<view class="right">+8615989366075</view>
										</view>
										<view class="item">
											<view class="left">公司邮箱</view>
											<view class="right">asy315@asy315.com</view>
										</view>
										<view class="item">
											<view class="left">公司地址</view>
											<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
										</view>
									</view>
								</view>
							</view>
							<view class="footer">
								ICP备案编号：粤ICP备18119196号-1
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item v-if="source.length>2">
					<scroll-view class="swiper-one-list" scroll-y="true">
						<view class="swiper-item uni-bg-blue">
							<view class="gap">以下信息由企业提供</view>
						</view>
						<view v-if="source[2].attr&&source[2].attr.length>0" v-for="(item,index) in source[2].attr"
							:key="index">
							<view class="info-title">
								<image src="https://app.asy315.vip/s/m/images/ycl_icon.png" mode="widthFix" class="info-title-icon"></image>
								<view class="info-title-text">{{item.title}}</view>
							</view>
							<view class="content-info">
								<view class="info-line" v-if="subItem.attrName||subItem.attrValue"
									v-for="(subItem,subIndex) in item.subAttr" :key="subIndex">
									<view class="info-line-left" v-if="subItem.attrName">
										{{subItem.attrName}}：
									</view>
									<view class="info-line-right" v-if="subItem.attrValue">
										{{subItem.attrValue}}
									</view>
								</view>
							</view>
							<view v-if="item.imageType">
								<u-swiper :list="item.images" height="650" border-radius="0"></u-swiper>
							</view>
							<view class="imgView padView" v-else>
								<image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" :src="imgItem"
									mode="widthFix" style="width: 100%;"></image>
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
						</view>
						<u-gap height="30" bg-color="#f5f5f5"></u-gap>
						<view class="fifth">
							<view class="title">
								<view class="left">关于我们</view>
								<view class="right">
									<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
								</view>
							</view>
							<view class="infoView">
								<view class="qr">
									<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;"></image>
								</view>
								<view class="info">
									<view class="item">
										<view class="left left1">公众号</view>
										<view class="right">ASY艾斯芸防伪</view>
									</view>
									<view class="item">
										<view class="left">联系方式</view>
										<view class="right">+8615989366075</view>
									</view>
									<view class="item">
										<view class="left">公司邮箱</view>
										<view class="right">asy315@asy315.com</view>
									</view>
									<view class="item">
										<view class="left">公司地址</view>
										<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
									</view>
								</view>
							</view>
						</view>
						<view class="footer">
							ICP备案编号：粤ICP备18119196号-1
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item v-if="source.length>3">
					<scroll-view class="swiper-one-list" scroll-y="true">
						<view class="swiper-item uni-bg-blue">
							<view class="gap">以下信息由企业提供</view>
							<view v-for="(item,index) in source[3].attr" :key="index">
								<view class="info-title">
									<image src="https://app.asy315.vip/s/m/images/ycl_icon.png" mode="widthFix" class="info-title-icon"></image>
									<view class="info-title-text" v-if="item.title">{{item.title}}</view>
								</view>
								<view v-if="item.imageType">
									<u-swiper :list="item.images" height="650" border-radius="0"></u-swiper>
								</view>
								<view class="imgView padView" v-else>
									<image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" :src="imgItem"
										mode="widthFix" style="width: 100%;"></image>
								</view>
								<view class="content-info">
									<view class="info-line" v-if="subItem.attrName||subItem.attrValue"
										v-for="(subItem,subIndex) in item.subAttr" :key="subIndex">
										<view class="info-line-left" v-if="subItem.attrName">
											{{subItem.attrName}}：
										</view>
										<view class="info-line-right" v-if="subItem.attrValue">
											{{subItem.attrValue}}
										</view>
									</view>
								</view>
								<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							</view>
							<u-gap height="30" bg-color="#f5f5f5"></u-gap>
							<view class="fifth">
								<view class="title">
									<view class="left">关于我们</view>
									<view class="right">
										<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
									</view>
								</view>
								<view class="infoView">
									<view class="qr">
										<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;"></image>
									</view>
									<view class="info">
										<view class="item">
											<view class="left left1">公众号</view>
											<view class="right">ASY艾斯芸防伪</view>
										</view>
										<view class="item">
											<view class="left">联系方式</view>
											<view class="right">+8615989366075</view>
										</view>
										<view class="item">
											<view class="left">公司邮箱</view>
											<view class="right">asy315@asy315.com</view>
										</view>
										<view class="item">
											<view class="left">公司地址</view>
											<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
										</view>
									</view>
								</view>
							</view>
							<view class="footer">
								ICP备案编号：粤ICP备18119196号-1
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: "#2b85e4",
				isActive: 0,
				info: {
					checkCode: "",
					customer: {
						nameCn: "",
						phone: "",
						website: "",
						id: ''
					},
					label: {
						id: 0,
						queryTimes: "",
						firstTime: "",
						code: ""
					},
					code: [],
				},
				formData: {
					'code': "",
					'ip': "",
					'city': "",
					'longitude': "",
					'latitude': "",
					'deviceInfo': "",
					'querySource': "",
					'mapType': 0
				},
				productImg: [],
				company: [{
					left_text: "公司名称",
					right_text: "新疆仪尔高新农业开发有限公司"
				}, {
					left_text: "公司地址",
					right_text: "新疆巴州焉耆县七个星镇"
				}, {
					left_text: "公司电话",
					right_text: "0996-2039577"
				}, {
					left_text: "公司网址",
					right_text: "http://www.xiangdu.com",
					isLink: true
				}],
				center: {
					lng: "116.39742",
					lat: "39.909"
				},
				covers: [{
					id: 0,
					latitude: '39.909',
					longitude: '116.39742',
					iconPath: 'https://app.asy315.vip/s/m/images/location.png',
					width: 30,
					height: 30,
					callout:{
						content:"",
						fontSize:16,
						borderRadius:15,
						padding:15,
						display:'ALWAYS'
					}
				}],
				code: "",
				imgSrc: "",
				imgSrc1: [],
				appUrl: "",
				source: [{
					attr: []
				}, {
					attr: []
				}, {
					attr: []
				}, {
					attr: []
				}],
				basicUrl: this.$u.http.config.baseUrl,
				imgWidth: false,
				isShowPage:false,
			};
		},
		onLoad(option) {
			// #ifdef H5
			let regx = /\d{10,}/;
			let url = location.href
			let str = ""
			if (url.match(regx) !== null) {
				str = url.match(regx)[0]
				this.code = str
				this.getTraceInfo()
			}else{
				if(uni.getStorageInfoSync('labelInfo_s')){
					let res = uni.getStorageSync('labelInfo_s')
					this.initData(res)
				}
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.getLocation()
			let code = option.code
			if (code) {
				this.code = code
				this.getTraceInfo()
			}
			// #endif
		},
		methods: {
			getTraceInfo() {
				this.$u.api.getTraceInfo({
					code: this.code
				}).then(res => {
					if (res.status == 200) {
						this.initData(res)
					}
				})
			},
			initData(res){
				this.info = res.data
				uni.setStorageSync('queryData',this.info)
				let code = []
				let codeNum = this.info.label.code.split('').reverse()
				if (this.info.productSource || this.info.batchSource) {
					if(this.info.productSource){
						this.source = JSON.parse(this.info.productSource.content)
					} else if (this.info.batchSource){
						this.source = JSON.parse(this.info.batchSource.content)
					}
					uni.setStorageSync('sourceData',this.source)
					if(this.info.redirectUrl){
						if(this.info.redirectUrl == '/m/shunyi'){
							uni.redirectTo({
								url:'/m/shunyi'
							})
							return
						}
					}
					for (let i in this.source) {
						switch (i) {
							case "0":
								this.source[i].icon = 'https://app.asy315.vip/s/m/images/product.png'
								break;
							case "1":
								this.source[i].icon = 'https://app.asy315.vip/s/m/images/company1.png'
								break;
							case "2":
								this.source[i].icon = 'https://app.asy315.vip/s/m/images/supervise.png'
								break;
							case "3":
								this.source[i].icon = 'https://app.asy315.vip/s/m/images/blockchain.png'
								break;
						}
						for (let j in this.source[i].attr) {
							if (this.source[i].attr[j].images.length > 0) {
								for (let z in this.source[i].attr[j].images) {
									this.source[i].attr[j].images[z] = this.basicUrl + this.source[i].attr[
										j].images[z]
								}
							}
						}
					}
				}
				for (let i = 1; i <= codeNum.length; i++) {
					if (i == this.info.checkCodeValue) {
						let obj = {
							value: codeNum[i - 1],
							class: "active"
						}
						code.push(obj)
					} else {
						let obj = {
							value: codeNum[i - 1],
							class: ""
						}
						code.push(obj)
					}
				}
				this.info.code = code.reverse()
				if (this.info.appUrl) {
					this.appUrl = this.$u.http.config.baseUrl + this.info.appUrl
				} else {
					this.appUrl = this.$u.http.config.baseUrl + '/open/app'
				}
				this.company[0].right_text = this.info.customer.nameCn
				this.company[1].right_text = this.info.customer.address
				this.company[2].right_text = this.info.customer.phone
				this.company[3].right_text = this.info.customer.website
				// #ifdef H5
				this.center.lng = this.info.customer.longitude
				this.center.lat = this.info.customer.latitude
				// #endif
				// #ifdef MP-WEIXIN
				let localtion = this.bMapTransqqMap(this.info.customer.longitude,this.info.customer.latitude)
				this.center.lng = localtion.longitude
				this.center.lat = localtion.latitude
				this.covers[0].latitude = localtion.latitude
				this.covers[0].longitude = localtion.longitude
				this.covers[0].callout.content = this.info.customer.nameCn
				// #endif
				if (this.info.checkImage) {
					this.imgSrc = "data:image/png;base64," + this.info.checkImage
					this.imgSrc1.push("data:image/png;base64," + this.info.checkImage)
				} else {
					this.imgSrc = this.$u.http.config.baseUrl + '/' + this.info
						.batchImage
				}
				if (this.info.product.image2) {
					let arr = this.info.product.image2.split(',')
					for (let i in arr) {
						let src = this.$u.http.config.baseUrl + arr[i]
						this.productImg.push(src)
					}
				}
				this.getImgInfo()
				this.getLocation()
			},
			// 获取用户位置
			getLocation() {
				this.$location.location().then(res => {
					console.log(res);
					this.formData.longitude = res.longitude
					this.formData.latitude = res.latitude
					this.formData.ip = res.ip
					this.formData.city = res.city
					this.formData.deviceInfo = res.deviceInfo
					this.postUserLocation()
				}).catch(e => {
					this.formData.longitude = e.longitude
					this.formData.latitude = e.latitude
					this.formData.ip = e.ip
					this.formData.city = e.city
					this.formData.deviceInfo = e.deviceInfo
					this.postUserLocation()
				})
			},
			// 提交用户位置信息
			postUserLocation() {
				this.formData.code = this.code
				this.$postlocation.postLocation(this.formData)
			},
			gridClick(index) {
				this.isActive = index
			},
			swiperChange(value) {
				this.isActive = value.detail.current
			},
			getRequest() {
				var url = location.search; //获取url中"?"符后的字串  
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					return str
				}
			},
			preview() {
				uni.previewImage({
					current: 0,
					urls: this.imgSrc1,
					success: () => {},
					fail: () => {}
				});
			},
			getImgInfo() {
				uni.getImageInfo({
					src: this.imgSrc,
					success: (image) => {
						if (image.width >= 400) {
							this.imgWidth = true
						} else {
							this.imgWidth = false
						}
					}
				});
			},
			// #ifdef MP-WEIXIN
			bMapTransqqMap(lng, lat) {
				let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
				let x = lng - 0.0065;
				let y = lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta);
				let lats = z * Math.sin(theta);
				return {
					longitude: lngs,
					latitude: lats
				};
			},
			// #endif
			// #ifdef H5
			toAsy() {
				window.location.href = 'https://www.asy315.com'
			},
			// handler() {
			// 	this.getTraceInfo()
			// },
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.tabs {
			.tabs-icon {
				width: 100rpx;
			}

			.grid-text {
				color: #2b85e4;
				font-weight: bold;
			}
		}

		.content {
			flex: 1;

			.swiper {
				height: 100%;
				overflow: auto;

				.swiper-one-list {
					width: 100%;
					height: 100%;

					.padView {
						padding: 0 24rpx;

						.product_img {
							width: 100%;
							vertical-align: bottom;
						}
					}
				}
			}

			.gap {
				height: 77rpx;
				line-height: 77rpx;
				background-color: #f5f5f5;
				text-align: center;
				color: #ccc;
			}

			.imgView {
				text-align: center;
			}

			.infoView {
				.info {
					display: flex;
					margin-bottom: 20rpx;

					.left {
						margin-right: 20rpx;
						// font-size: 32rpx;
						color: #666;
						flex: 0.4;
						letter-spacing: 4rpx;
					}

					.code {
						letter-spacing: 22rpx;
					}

					.right {
						flex: 1;

						.active {
							background-color: #000;
							color: #fff;
							font-weight: bold;
						}
					}
				}

				.videoView {
					video {
						width: 100%;
						height: 300rpx;
					}
				}
			}

			.info-title {
				padding: 20rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;

				.info-title-icon {
					width: 60rpx;
					margin-right: 10rpx;
				}

				.info-title-text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.content-info {
				// line-height: 100rpx;
				font-size: 30rpx;
				// padding-bottom: 40rpx;
				padding: 0 40rpx 40rpx 0;

				.info-line {
					display: flex;
					// align-items: center;
					margin-top: 20rpx;

					.info-line-left {
						width: 280rpx;
						text-align: right;
						color: #666;
					}

					.info-line-right {
						flex: 1;
						word-wrap: break-word;
						word-break: break-all
					}
				}
			}

			.map {
				width: 100%;
				height: 600rpx;

				.bm-view {
					width: 100%;
					height: 100%;
				}
			}

			.fifth {
				padding: 30rpx 30rpx 0;

				.title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}

				.infoView {
					display: flex;

					.qr {
						margin-right: 18rpx;
					}

					.info {
						flex-direction: column;

						.item {
							display: flex;
							margin-bottom: 18rpx;

							.left {
								flex: 0.5;
								margin-right: 10rpx;
								color: #666;
								letter-spacing: 4rpx;
							}

							.left1 {
								letter-spacing: 20rpx;
							}

							.right {
								flex: 1;
							}
						}
					}
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #333;
				padding: 30rpx;
				color: #fff;
				width: 100%;
			}
		}
	}
</style>
